<template>
  <div>
      <!-- <form action="http://localhost/rdms/php/public/index.php/admin/resume/uploadUserPics" enctype="multipart/form-data" method="post">
        <input type="file" name="image[]" /> <br> 
        <input type="file" name="image[]" /> <br> 
        <input type="file" name="image[]" /> <br> 
        <input type="submit" value="上传" /> 
        </form>  -->
    <!-- 头部基本信息 -->
    <el-row>
      <el-col :span="24">
        <header-top></header-top>
      </el-col>
    </el-row>
    <!-- logo -->
    <el-row>
      <el-col :span="24">
          <logo-top></logo-top>
      </el-col>
    </el-row>
    <!-- 主导航 -->
    <el-row>
      <el-col :span="24">
        <main-nav></main-nav>
      </el-col>
    </el-row>
    <!-- 面包屑 -->
    <div class="breadWrapper">
      <el-row>
        <el-col :span="22">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="(item,index) of breadList" :key="index" :index="index">
                {{item}}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="2" class="closePageWrapper"> 
            <icon name="closePage" class="scaleIcon1 closePage" @click.native.stop="returnBack" v-if="isMenuLevel !== '2'"></icon>
        </el-col>
      </el-row>

    </div>

  <!-- 表格 -->
    <el-row>
      <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-col :span="24">
              <transition name="fade" mode="out-in" appear>
                <router-view></router-view>
              </transition>
            </el-col>
          </div>
      </el-col>

    </el-row>
  </div>
</template>



<script>
  import leftMenu from './Common/leftMenu.vue'
  import changePwd from './Account/changePwd.vue'
  import http from '../assets/js/http'
  import Lockr from 'lockr'
  import Cookies from 'js-cookie'
  import _ from 'lodash'
  import _g from '@/assets/js/global'
  import config from '@/assets/js/config.js'

   import headerTop from './Common/headerTop.vue'
   import logoTop from './Common/logoTop.vue'
   import mainNav from './Common/mainNav.vue'

  
  export default {
    data() {
      return {
        breadList:[],                                                                       //  面包屑
        isMenuLevel:'',                                                                 //..上级菜单在下拉菜单中的级别

        username: '',
        childMenu: [],
        menuData: [],
        hasChildMenu: false,
        menu: null,
        module: null,
        img: '',
        title: '',
        logo_type: null,
        a:'',
      }
    },
    methods: {
    /* 返回上一页 */
    returnBack(){
        this.$router.go(-1)
    },
      logout() {
        this.$confirm('确认退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          _g.openGlobalLoading()
          let data = {
            authkey: Lockr.get('authKey')
          }
          this.apiPost('admin/base/logout', data).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              Lockr.rm('authKey')
              Lockr.rm('expire')
              Lockr.rm('rememberKey')
              Cookies.remove('rememberPwd')
              Cookies.remove('roles')
              _g.toastMsg('success', '退出成功')
              setTimeout(() => {
                this.$router.replace('/')
              }, 1500)
            })
          })
        }).catch(() => {
  
        })
      },
      switchTopMenu(item) {
        if (!item.child) {
          this.$router.push(item.url)
        } else {
          this.$router.push(item.child[0].child[0].url)
        }
      },
      handleMenu(val) {
        switch (val) {
          case 'logout':
            this.logout()
            break
          case 'changePwd':
            this.changePwd()
            break
        }
      },
      changePwd() {
        this.$refs.changePwd.open()
      },
      getTitleAndLogo() {
        this.apiPost('admin/base/getConfigs').then((res) => {
          this.handelResponse(res, (data) => {
            document.title = data.SYSTEM_NAME
            this.logo_type = data.LOGO_TYPE
            this.title = data.SYSTEM_NAME
            this.img = config.HOST + data.SYSTEM_LOGO
          })
        })
      },
      getUsername() {
        this.username = this.$store.state.users.username
      }
    },
    created() {
      // this.getTitleAndLogo()
      // let authKey = Lockr.get('authKey')
      // if (!authKey) {
      //   _g.toastMsg('warning', '您尚未登录')
      //   setTimeout(() => {
      //     this.$router.replace('/')
      //   }, 1500)
      //   return
      // }
      // this.getUsername()
      // let menus = this.$store.state.menus
      // this.menu = this.$route.meta.menu
      // this.module = this.$route.meta.module
      // _(menus).forEach((res) => {
      //   if (res.module == this.module) {
      //     this.menuData = res.child
      //     res.selected = true
      //   } else {
      //     res.selected = false
      //   }
      // })
    },
    computed: {
      routerShow() {
        return this.$store.state.routerShow
      },
      showLeftMenu() {
        this.hasChildMenu = this.$store.state.showLeftMenu
        return this.$store.state.showLeftMenu
      }
    },
    components: {
      leftMenu,
      changePwd,

      headerTop,
      logoTop,
      mainNav
    },

    beforeRouteEnter(to,from, next) {
        next((vm) => {
            vm.breadList = to.meta.titles;
            vm.isMenuLevel = to.meta.menuLevel
        });
      },
    watch: {
        // 监听路由变化
      '$route' (to, from) {
          this.breadList = to.meta.titles
          this.isMenuLevel = to.meta.menuLevel
          console.log('isMenuLevel = ', this.isMenuLevel)
        // _(this.$store.state.menus).forEach((res) => {
        //   if (res.module == to.meta.module) {
        //     res.selected = true
        //     if (!to.meta.hideLeft) {
        //       this.menu = to.meta.menu
        //       this.menuData = res.child
        //     }
        //   } else {
        //     res.selected = false
        //   }
        // })
      },
      deep:true
    },
    mixins: [http]
  }
</script>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }
  
  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }
  
  .panel {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
  }
  
  .panel-top {
    height: 60px;
    line-height: 60px;
    background: #1F2D3D;
    color: #c0ccda;
  }
  
  .panel-center {
    background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
  }
  
  .panel-c-c {
    background: #f1f2f7;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 220px;
    overflow-y: scroll;
    padding: 20px 20px 0;
  }
  
  .logout {
    background: url(../assets/images/logout_36.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    float: left;
  }
  
  .logo {
    width: 150px;
    float: left;
    margin: 10px 10px 10px 18px;
  }
  
  .tip-logout {
    float: right;
    margin-right: 20px;
    padding-top: 5px;
    cursor: pointer;
  }
  
  .admin {
    color: #c0ccda;
    text-align: center;
  }
  
  .hide-leftMenu {
    left: 0px;
  }
  
  .aside {
    width: 220px !important;
    height: 100%;
    overflow-y: scroll !important;
  }
</style>


